<template>
  <div class="biekManage">
    <el-tabs type="card" @edit="handleTabsEdit" v-model="tableTabsValue">
      <el-tab-pane label="车辆列表" name="bikeList">
        <el-form :inline="true" :model="findBike" class="findBike" size="mini">
         
          <el-form-item label="价格:" label-width="80px" >
            <el-input v-model="findBike.minRentMoney" class="rentMoney" clearable></el-input>
          </el-form-item>
          <el-form-item label="至" >
            <el-input v-model="findBike.maxRentMoney" class="rentMoney" clearable></el-input>元/月(时)
          </el-form-item>

          <el-form-item label="地址：" label-width="120px" >
            <el-select v-model="findBike.province" class="address" clearable style="width: 150px">
              <el-option v-for="item in provinceList" :label="item.name" :value="item.name" :key="item.id"></el-option>
            </el-select> 省
            <el-select v-model="findBike.city" class="address" clearable style="width: 150px">
              <el-option v-for="item in cityList" :label="item.name" :value="item.name" :key="item.id"></el-option>
            </el-select> 市
            <el-select v-model="findBike.county" class="address" clearable style="width: 150px">
              <el-option v-for="item in countyList" :label="item.name" :value="item.name" :key="item.id"></el-option>
            </el-select> 区(县)
          </el-form-item>

          <!-- <el-form-item label="检索输入" label-width="100px" >
            <el-input v-model="findHBike.condition" clearable placeholder="请输入商户的id或名字"></el-input>
          </el-form-item> -->

          <!-- <span class="otherCondition" @click="changeOtherCondition">
            <i v-if="!otherCondition" class="el-icon-caret-bottom"></i>
            <i v-if="otherCondition" class="el-icon-caret-top"></i>更多搜索
          </span> -->

          <el-button type="primary" size="mini" @click="findBikeByCondition">查询</el-button>
          <el-button type="primary" size="mini" @click="addBikeResource">增加车辆</el-button>
        </el-form>
        <div style="margin-left:1%;margin-right:1%" class="bikeList">
          <el-row>
            <el-col :span="12" v-for="item in bikeList" :key = "item.id" >
              <div style="margin: 10px">
                <el-card :body-style="{padding:'0px'}" shadow="hover">
                  <img :src="item.picList.length==0?'':baseUrl+item.picList[0].url" class="hoseImage">
                  <!-- <div class="simple">
                    <span>{{item.rentType==0?"整租":"合租"}} | {{item.bikeTypeStr}} | {{item.area}}㎡ | {{item.buildTime}} 年建</span>
                  </div> -->
                  <div style="padding-left:228px;">
                    <div style="padding-left: 120px;">
                      <div class="describe" style="display: flex; align-items: center; gap: 24px; font-size: 15px;">
                        <div>
                          <div style="color: #666; margin-bottom: 4px;">长租价格</div>
                          <div style="font-weight: 600; color: #222;"><span style="color: red;">{{item.rentingMonth}}</span> 元/月</div>
                        </div>
                        <div style="height: 24px; width: 1px; background: #eee;"></div>
                        <div>
                          <div style="color: #666; margin-bottom: 4px;">短租价格</div>
                          <div style="font-weight: 600; color: #222;"><span style="color: red;">{{item.rentingHour}}</span> 元/时</div>
                        </div>
                      </div>
                    </div>
                  <div class="describe">
                    所在地址：<span>{{item.province}}{{item.city}}{{item.county}}{{item.address}}</span>
                  </div>
                  <div class="describe">
                    里程数（公里）：<span>{{item.distance}}</span>
                  </div>
                  <div class="describe">
                    车辆型号：<span>{{  getBikeTypeValue(item.bikeType) }}</span>
                  </div>
                  <div class="funBtn">
                    <div class="bikeState" style="padding-top: 5px;">
                      <div class="stateTitle" style="line-height: 42px">状态：</div>
                      <el-tag v-if="item.state==0">审核中</el-tag>
                      <el-tag type="success" v-if="item.state==1">正在出租</el-tag>
                      <el-tag type="info" v-if="item.state==2">已出租</el-tag>
                      <el-tag type="danger" v-if="item.state==3">审核失败</el-tag>
                    </div>

                    <div class="options">
                      <el-button type="primary" size="small" @click="changeBikeInfo(item) " class="changeBikeInfo" v-if="user.role==2">审核</el-button>
                      <el-button type="primary" size="small" @click="changeBikeInfo(item) " class="changeBikeInfo" v-if="user.role!=2">查看</el-button>
                      <el-button type="primary" size="small" @click="deleteBike(item.id)" class="changeBikeInfo" v-if="user.role!=2">删除</el-button>
                    </div>
                  </div>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-pagination
          class="bikePage"
          @size-change="sizeChange"
          @current-change="currentChange"
          @prev-click="prevClick"
          @next-click="nextClick"
          background
          layout="total,sizes,prev, pager, next"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          :total="bikePage.count">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane v-for="item in tabList" :label="item.title" :name="item.name" :key="item.name" closable="closable">
        <div class="changeBike" v-show="paneShow.updateBike">
          <el-carousel :interval="4000" type="card" height="400px">
            <el-carousel-item v-for="item in changingBike.picList" :key="item.id">
              <img :src="baseUrl+item.url"  width="400" height="320">
            </el-carousel-item>
          </el-carousel>
          <div class="bikeInfo">
            <div class="bikeInfoTitle"><span>车辆信息</span></div>

            <div>
              <div class="bikeMoney" style="display: flex; justify-content: center; gap: 24px; font-size: 15px;padding-top: 20px;">
                        <div>
                          <div style="color: #666; margin-bottom: 4px;">长租价格</div>
                          <div style="font-weight: 600; color: #222;"><span style="color: red;">{{changingBike.rentingMonth}}</span> 元/月</div>
                        </div>
                        <div style="height: 24px; width: 1px; background: #eee;"></div>
                        <div>
                          <div style="color: #666; margin-bottom: 4px;">短租价格</div>
                          <div style="font-weight: 600; color: #222;"><span  style="color: red;">{{changingBike.rentingHour}}</span> 元/时</div>
                        </div>
                      </div>
            </div>
            <el-divider></el-divider>
            <div class="bikeInfoContent">
              <el-row :gutter="30">
                <el-col :span="6">所在地区：{{changingBike.province+'省'+changingBike.city+'市'+changingBike.county+'县'}}</el-col>
                <el-col :span="6">地址：{{changingBike.address}}</el-col>
                <el-col :span="6">里程数：{{changingBike.distance}}公里</el-col>
                <el-col :span="6">车辆型号：{{getBikeTypeValue(changingBike.bikeType)}}</el-col>
              </el-row>
            </div>
            <el-divider></el-divider>
            <div class="checkBtn">
              <el-button type="primary" size="small" @click="verifySuccess" v-if="user.role!=1">审核通过</el-button>
              <el-button type="primary" size="small" @click="verifyFail" v-if="user.role!=1">审核不通过</el-button>
              <el-button type="primary" size="small" @click="cancel">取消</el-button>
            </div>
          </div>
        </div>
        <div class="addBike" v-show="paneShow.addBike">
          <div class="bikeBaseInfo" v-show="bikeBaseInfoShow">
            <el-form class="addBikeForm" :model="addBikeForm" :rules="addBikeRules" ref="addBikeForm" size="small">
              <el-form-item label="地址：">
                <el-cascader v-model="addBikeForm.add"
                             :options="addressOptions"
                             filterable
                             :props="{ expandTrigger: 'hover' }" style="float: right">

                </el-cascader>
              </el-form-item>
              <el-form-item label="具体地址：">
                <el-input v-model="addBikeForm.address" placeholder="请输入车辆具体地址" class="addBikeInput"></el-input>
              </el-form-item>
                <!-- <el-form-item label="出租类型：">
                <el-radio-group v-model="addBikeForm.rentType" @change="roommates">
                  <el-radio label="长租" :value="1"></el-radio>
                  <el-radio label="短租" :value="0"></el-radio>
                </el-radio-group>
              </el-form-item> -->
              <el-form-item label="短租-租金：(元/时)">
                <el-input v-model="addBikeForm.rentingHour" placeholder="请输入车辆价格" class="addBikeInput"></el-input>
              </el-form-item>
              <el-form-item label="长租-租金：(元/月)">
                <el-input v-model="addBikeForm.rentingMonth" placeholder="请输入车辆价格" class="addBikeInput"></el-input>
              </el-form-item>

              <el-form-item label="里程数（公里）：">
                <el-input v-model="addBikeForm.distance" placeholder="请输入车辆里程数（公里）" class="addBikeInput"></el-input>
              </el-form-item>

              <el-form-item label="车辆型号：">
                <el-select v-model="addBikeForm.bikeType" class="addBikeType">
                  <el-option v-for="item in bikeTypeOptions" :label="item.value" :value="item.index" :key="item.index"></el-option>
                </el-select>
              </el-form-item>

              <el-button type="primary" size="small" @click="nextStep">下一步</el-button>
            </el-form>
          </div>
          <div v-show="!bikeBaseInfoShow">
            <!-- <el-select v-model="chooseTag">
              <el-option v-for="item in allTagList" :label="item.name" :value="item.id" :key="item.id"></el-option>
            </el-select>
            <el-button type="primary" size="small" @click="addTag" style="margin-left: 10px;">添加</el-button> -->

            <div>
              <el-tag
                v-show="chooseTagList.length>0"
                v-for="tag in chooseTagList"
                :key="tag.name"
                @close="closeTag(tag)"
                closable>
                {{tag.name}}
              </el-tag>
            </div>
            <div>
              <div class="title" style="font-size: 10px;color: red">定位不准确，请手动选择位置</div>
              <div id="myMap"></div>
            </div>
            <el-upload class="upload-demo"
                       :action="uploadPicUrl"
                       :on-preview="handlePreview"
                       :on-remove="handleRemove"
                       :file-list="fileList"
                       :headers="uploadHeaders"
                       auto-upload="auto-upload"
                       list-type="picture-card"
                       :before-upload="beforeUpload"
                       :on-success="bikePicUpload">
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="baseUrl+dialogImageUrl">
            </el-dialog>
            <div class="addBtn">
              <el-button type="primary" size="small" @click="prevStep">上一步</el-button>
              <el-button type="primary" size="small" @click="add">添加</el-button>
              <el-button type="primary" size="small" @click="cancel">取消</el-button>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {base} from "../../config";
import {baseMessage} from "../../network/message";


export default {
  name: "BikeManage",
  data(){
    return{
      findHBike:{},
      baseMessage:baseMessage,
      mapInited:false,
      key:base.key,
      getLocationUrl: base.getLocationUrl,
      map:{
        longitude:'',
        latitude:'',
      },
      chooseTag:'',
      addBikeStep:0,
      bikeBaseInfoShow:true,
      allTagList:[

      ],
      chooseTagList:[

      ],
      bikePageParams:{
        pageNo:1,
        pageSize:10,
        count: 0,
      },
      baseUrl: base.picLocal,
      uploadPicUrl:base.baseUrl+"/bikeResource/uploadPic",
      uploadHeaders:{},
      dialogImageUrl:'',
      dialogVisible:false,
      uploadPhotoList:[

      ],
      fileList: [

      ],
      peopleView:true,
      bikeTypeOptions:[
    {
    index: 1,
    value: "雅迪"
     },
   {
     index: 2,
     value: "爱玛"
   },
   {
     index: 3,
     value: "新日"
   },
   {
     index: 4,
     value: "小牛电动"
   },
   {
    index: 5,
    value: "绿源"
   },
   {
   index: 6,
   value: "台铃"
   },
   {
   index: 7,
   value: "捷安特"
   },
   {
     index: 8,
     value: "雅马哈"
 }, 
   {
     index: 9,
     value: "其他"
   }
      ],
      addressOptions:[
        {
          value:'上海市',
          label:'上海市',
          children:[
            {
              value:'奉贤区',
              label:'奉贤区',
              children:[
                {
                  value:'南桥镇',
                  label:'南桥镇',

                },
                {
                  value: '奉城镇',
                  label: '奉城镇',
                },
                {
                  value: '庄行镇',
                  label: '庄行镇',
                },
                {
                  value: '金汇镇',
                  label: '金汇镇',
                },
                {
                  value: '四团镇',
                  label: '四团镇',
                },
                {
                  value: '青村镇',
                  label: '青村镇',
                },
                {
                  value: '柘林镇',
                  label: '柘林镇',
                },
                {
                  value: '海湾镇',
                  label: '海湾镇',
                },
              ]
            }
          ]
        },
      ],
      addBikeForm:{
        type:[],
        add:[],
        province:'',
        city:'',
        county:'',
        address:'',
        rentingMonth:'',
        rentingHour:'',
        area:'',
        describe:'',
        bikeType:'',
        floor:'',
        buildTime: '',
        rentType:1,
        peopleNum: '',
        state:'',
        shiType:'',
        tingType:'',
      },
      addBikeRules: {
      add: [
        { required: true, message: '请选择地址', trigger: 'change' }
      ],
      address: [
        { required: true, message: '请输入具体地址', trigger: 'blur' }
      ],
      rentType: [
        { required: true, message: '请选择出租类型', trigger: 'change' }
      ],
      rentingHour: [
        { required: true, message: '请输入租金（元/时）', trigger: 'blur' }
      ],
      rentingMonth: [
        { required: true, message: '请输入租金（元/月）', trigger: 'blur' }
      ],
      distance: [
        { required: true, message: '请输入里程数', trigger: 'blur' }
      ],
      bikeType: [
        { required: true, message: '请选择车辆型号', trigger: 'change' }
      ]
    },
      paneShow:{
        updateBike : false,
        addBike: false
      },
      bikePage:{
        pageSize:10,
        pageNo:1,
        count:10
      },
      tableTabsValue:'bikeList',
      tabList:[

      ],
      lookBikeResource:false,
      provinceList:[
        {
          id:'2',
          name:'上海市'
        }
      ],
      cityList:[
        {
          id:'2',
          name:'奉贤区'
        }
      ],
      countyList:[
        {
          id:'1',
          name:'南桥镇',

        },
        {
          id: '2',
          name: '奉城镇',
        },
        {
          id: '3',
          name: '庄行镇',
        },
        {
          id: '4',
          name: '金汇镇',
        },
        {
          id: '5',
          name: '四团镇',
        },
        {
          id: '6',
          name: '青村镇',
        },
        {
          id: '7',
          name: '新都区',
        },
        {
          id: '8',
          name: '柘林镇',
        },
        {
          id: '9',
          name: '海湾镇',
        }
      ],
      otherCondition:false,
      bikeList:[

      ],
      changingBike:{
        id:'1',
        province:'',
        city:'',
        county:'',
        address:'',
        money:"",
        area:'',
        describe:'',
        bikeType:'',
        bikeTypeStr:'',
        floor:'',
        buildTime:'',
        rentType:'',
        peopleNum:'',
        picList:[

        ],
        tagList:[
          {
            id:'1',
            name:''
          },
          {
            id:'2',
            name:''
          },
          {
            id:'3',
            name:''
          },
        ]
      },
      rentType:[
        {
          rentType:0,
          rentTypeStr:'短租'
        },
        {
          rentType:1,
          rentTypeStr: '长租'
        }
      ],
      bikeType:[

      ],
      tagList:[

      ],
      findBike:{
        rentType:'',
        bikeType:'',
        minArea:'',
        maxArea:'',
        minRentMoney:'',
        maxRentMoney:'',
        tagList:[],
        province:'',
        city:'',
        county:'',
        condition:''
      },
      user:{

      }
    }
  },
  computed:{
    getBikeTypeValue() {
      return (index) => {
        const option = this.bikeTypeOptions.find(option => option.index == index);
        return option ? option.value : '未知型号';
      };
    }
  },
  methods:{
   
    //初始化地图
    initMap(){
      // console.log(this.mapInited)
      if(this.mapInited){
        // console.log(true)
        return
      }
      //定义地图中心点坐标
      var center = new TMap.LatLng(this.map.latitude, this.map.longitude)
      //定义map变量，调用 TMap.Map() 构造函数创建地图
      var that = this;
      this.$nextTick(()=>{
        var map = new TMap.Map(document.getElementById('myMap'), {
          center: center,//设置地图中心点坐标
          zoom: 17.2,   //设置地图缩放级别
          pitch: 43.5,  //设置俯仰角
          rotation: 45,    //设置地图旋转角度
          //设置地图为2D
          viewMode:'2D',
        });

        //初始化marker图层
        var markerLayer = new TMap.MultiMarker({
          id: 'marker-layer',
          map: map
        });
        markerLayer.add({
          position:center
        })
        let lng;
        let lat;
        map.on('click', (event)=>  {
          // 获取点击后的地图坐标
          lng = String(event.latLng.getLng());
          lat = String(event.latLng.getLat());
          //改变标记点的坐标
          // console.log(lat,lng)
          markerLayer.setMap(null);
          markerLayer = new TMap.MultiMarker({
            id: 'marker-layer',
            map: map
          });
          var sign = new TMap.LatLng(lat, lng)
          markerLayer.add({
            position:sign
          })
          //设置车辆的经纬度
          // console.log("纬度"+lat)
          // console.log("经度"+lng)
          this.map.latitude = lat;
          this.map.longitude = lng;
        })
        this.mapInited = true;
      })

    },
    verifyFail(){
      //审核不通过
      this.$prompt('请输入不通过理由','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        inputErrorMessage:'请输入原因！',
        inputValidator:(value=>{
          if(value){
            return true;
          }else{
            return false;
          }
        })
      }).then(value=>{
        //向后端发送请求，修改这条信息的状态
        let params = {
          id:this.changingBike.id,
          state:3,
          remake:value.value,
        }
        this.$network.saveBike(params).then(res=>{
          //退出标签页
          if(res.data.code=='200'){
            this.$message({
              message:'操作成功',
              type:'success'
            })
          }
          //向商户发送审核成功的消息
          let params = {
            receiverType:'0',
            receiverId:this.changingBike.createBy.id,
            title:'车辆审核未通过',
            text:baseMessage.examineFail(this.changingBike.id),
            state:0
          }
          //向后端发送请求，增加消息
          this.$network.addMessage(params).then(res=>{

          }).catch(err=>{
            console.log(err)
          })
          //关闭标签页
          this.tabList=[];
          this.tableTabsValue='bikeList';
          //重新查询车辆数据
          params = {
            pageNo:this.bikePage.pageNo,
            pageSize:this.bikePage.pageSize
          }
          this.findBikePage(params)
        }).catch(err=>{
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    verifySuccess(){
      this.$confirm('确定通过这个车辆记录吗？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res=>{
        //审核通过，将车辆的状态改为正在出租
        let params ={
          id:this.changingBike.id,
          state:1
        }
        //修改车辆数据
        this.$network.saveBike(params).then(res=>{
          if(res.data.code=='200'){
            this.$message({
              message:'成功',
              type:'success'
            })
            //向商户发送审核成功的消息
            let params = {
              receiverType:'0',
              receiverId:this.changingBike.createBy.id,
              title:'车辆审核通过',
              text:baseMessage.examineSuccess(this.changingBike.id),
              state:0
            }
            //向后端发送请求，增加消息
            this.$network.addMessage(params).then(res=>{

            }).catch(err=>{
              console.log(err)
            })
          }
          //关闭标签页
          this.tabList=[];
          this.tableTabsValue='bikeList';
          //重新查询车辆数据
          params = {
            pageNo:this.bikePage.pageNo,
            pageSize:this.bikePage.pageSize
          }
          this.findBikePage(params)
        })
      })
    },
    changeOtherCondition(){
      this.otherCondition = !this.otherCondition;
    },
    handleTabsEdit(targetName, action){
      if(action==='remove'){
        this.tabList=[];
        this.tableTabsValue='bikeList'
        this.mapInited = !this.mapInited;
      }
    },
    changeBikeInfo(item){
      //向后台发送请求，查询该车辆的所有信息
      this.tabList = [{
        title: '查看车辆',
        name: 'lookBike'
      }];
      this.tableTabsValue='lookBike';
      this.paneShow.addBike = false;
      this.paneShow.updateBike = true;
      this.changingBike = item;
    },
    sizeChange(val){
      this.bikePage.pageSize = val;
      this.findBikeByCondition();
    },
    currentChange(val){
      this.bikePage.pageNo = val;
      this.findBikeByCondition();
    },
    prevClick(val){
      // console.log('prev')
      // this.bikePage.pageNo = val;
      // this.findBikeByCondition();
    },
    nextClick(val){
      // console.log(val)
      // this.bikePage.pageNo = val;
      // this.findBikeByCondition();
    },
    addBikeResource(){
      this.uploadPhotoList = []
      this.addBikeForm = []
      this.bikeBaseInfoShow = true;
      this.addBikeStep = 1;
      this.addBikeForm.rentType  = true
      this.tabList = [{
        title: '增加车辆',
        name: 'addBike'
      }];
      this.tableTabsValue='addBike';
      this.paneShow.updateBike = false;
      this.paneShow.addBike = true;
    },
    roommates(val){
      if(this.addBikeForm.rentType=='长租'){
        this.peopleView = false;
      }else{
        this.peopleView = true;
      }
    },
    add(){
      this.$refs.addBikeForm[0].validate((valid) => {
        if (valid) {
          let cTagList = JSON.parse(JSON.stringify(this.chooseTagList).replace(/id/g,"tagId"));
          //整合向后端发送的参数
          let params = {
            province:this.addBikeForm.add[0],
            city:this.addBikeForm.add[1],
            county:this.addBikeForm.add[2],
            address:this.addBikeForm.address,
            rentingHour:this.addBikeForm.rentingHour,
            distance:this.addBikeForm.distance,
            rentingMonth:this.addBikeForm.rentingMonth,
            //车辆位置
            latitude:this.map.latitude,
            longitude:this.map.longitude,
            bikeType:this.addBikeForm.bikeType,
            bikeType:this.addBikeForm.bikeType,
            state:0,
            picList: this.uploadPhotoList,
            tagList:cTagList
          }
          //调用后端接口
          this.$network.addBikeResource(JSON.stringify(params)).then(res=>{
            if(res.data.code=='200'){
              this.$message.success("新增成功")
              this.tabList=[];
              this.tableTabsValue='bikeList';
              this.mapInited = !this.mapInited;
              //重新查询一遍后端接口，返回车辆
              this.bikePage.pageNo = 1;
              this.bikePage.pageSize = 10;
              let params = {
                pageNo:this.bikePage.pageNo,
                pageSize:this.bikePage.pageSize,
              }
              this.findBikePage(params)
            }else{
              this.$message.error("新增出现错误")
              this.tabList=[];
              this.tableTabsValue='bikeList';
            }
          }).catch(err =>{
            console.log(err)
          })
        } else {
          return false;
        }
      });
    },
    cancel(){
      this.tabList=[];
      this.tableTabsValue='bikeList';
      this.mapInited = !this.mapInited;
    },
    handleRemove(file) {
      this.uploadPhotoList.forEach((value, index) => {
        if(value.name==file.name){
          this.uploadPhotoList.splice(index,1)
        }
      })
    },
    addTag(){
      this.allTagList.forEach(t=>{
        if((t.id)==this.chooseTag){
          if(!this.chooseTagList.includes(t)){
            this.chooseTagList.push(t)
          }
          return;
        }
      })

    },
    handlePreview(file){
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    findBikeByCondition(){
        //处理tagList参数
        let chooseTagList = [];
        for (let i = 0;i<this.findBike.tagList.length;i++){
          for (let j = 0;j<this.allTagList.length;j++){
            if(this.allTagList[j].id===this.findBike.tagList[i]){
              chooseTagList.push(this.allTagList[j])
            }
          }
        }
        //将查询条件封装为对象参数
        let params = {
          pageNo:this.bikePage.pageNo,
          pageSize:this.bikePage.pageSize,
          rentType:this.findBike.rentType,
          bikeType:this.findBike.bikeType,
          minArea:this.findBike.minArea,
          maxArea:this.findBike.maxArea,
          minMoney:this.findBike.minRentMoney,
          maxMoney:this.findBike.maxRentMoney,
          tagList:chooseTagList,
          province:this.findBike.province,
          city:this.findBike.city,
          county:this.findBike.county,
          condition:this.findBike.condition
        }
        this.findBikePage(params)
    },
    bikePicUpload(response, file, fileList){
      let url = response.data;
      let name = file.name;
      let temp = {
        url:url,
        name:name
      }
      this.uploadPhotoList.push(temp)
    },
    beforeUpload(){
      if (localStorage.getItem('token')) {
        this.uploadHeaders.token = localStorage.getItem('token');
      }
    },
    closeTag(tag){
      for (let i = 0;i<this.chooseTagList.length;i++){
        if(this.chooseTagList[i].id==tag.id){
          this.chooseTagList.splice(i,1);
        }
      }
    },
    nextStep(){
      this.addBikeStep = 2;
      this.bikeBaseInfoShow = false;
      //向后端发送请求，查询所有的标签
      this.$network.findAllTags().then(res=>{
        this.allTagList = res.data.data;
      })
      this.initMap()
    },
    prevStep(){
      this.addBikeStep = 1;
      this.bikeBaseInfoShow = true;
    },
    findBikePage(params){
      //判断当前登录用户的角色，如果为商户，那么就查询与商户相关的车辆
      let role = JSON.parse(localStorage.getItem("loginData")).role;
      // console.log(JSON.parse(localStorage.getItem("loginData")).role)
      if(role==1){
        this.findBikeByRole(params)
        return
      }else if(role==2){
        params.state=0
      }
      this.$network.findBikePageJson(params).then(res=>{
        if(res.data.code=='200'){
          this.bikeList = res.data.data.list;
          this.bikePage.count = res.data.data.count;
        }
      })
    },
    findBikeByRole(params){
      this.$network.findBikeByRole(params).then(res=>{
        if(res.data.code=='200'){
          this.bikeList = res.data.data.list;
          this.bikePage.count = res.data.data.count;
        }
      })
    },
    getLongitudeLatitude() {
      var _this = this;
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          //locationSuccess 获取成功的话
          function (position) {
            _this.map.longitude = position.coords.longitude;
            _this.map.latitude = position.coords.latitude;
            console.log(_this.getLatitude,_this.getLatitude)
          },
          //locationError  获取失败的话
          function (error) {
            var errorType = [
              "您拒绝共享位置信息",
              "获取不到位置信息",
              "获取位置信息超时",
            ];
            console.log(errorType[error.code - 1]);
          }
        );
      }
    },
    deleteBike(id){
      //删除信息
      this.$confirm('确定删除这条车辆信息吗？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res=>{
        //向后端发送请求，删除这条车辆信息
        let params = {
          id:id
        }
        this.$network.deleteBike(params).then(res=>{
          if(res.data.code=='200'){
            this.$message({
              message:'删除成功',
              type:'success'
            })
            this.findBikeByCondition();
          }
        }).catch(err=>{
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  beforeMount() {
    //向后端发送请求，查询所有的标签
    this.$network.findAllTags().then(res=>{
      this.allTagList = res.data.data;
    })
    //向后端发送请求，通过字典查询所有的型号
    let params = {
      type:'bike_type'
    }
    this.$network.findAllJson(params).then(res=>{
      this.bikeType  = res.data.data
    }).catch(err=>{
      console.log(err)
    })

    params = {
      pageNo:1,
      pageSize:10
    }
    this.findBikePage(params);
    this.user = JSON.parse(localStorage.getItem("loginData"));
  },
  mounted() {
    // this.initMap()
    //此方法谷歌浏览器禁用
    // var _this = this;
    // if(navigator.geolocation) {
    //   navigator.geolocation.getCurrentPosition(
    //     //locationSuccess 获取成功的话
    //     function(position) {
    //       _this.map.longitude = position.coords.longitude;
    //       _this.map.latitude = position.coords.latitude;
    //
    //     },
    //     //locationError  获取失败的话
    //     function(error) {
    //       var errorType = ['您拒绝共享位置信息', '获取不到位置信息', '获取位置信息超时'];
    //       alert(errorType[error.code - 1]);
    //     }
    //   );
    // }
  },
  created() {
    /**
     * 获取定位
     */
    // console.log("create")
    let data = {
      key:this.key
    };
    let url = this.getLocationUrl;
    data.output = "jsonp";
    //使用jsonp访问，防止跨域
    this.$jsonp(url,data).then(res=>{
      console.log(res)
      this.map.latitude = res.result.location.lat;
      this.map.longitude = res.result.location.lng;
    }).catch(err=>{
      console.log(err)                          
    })

  }
}
</script>

<style scoped>
.upload-demo{
  margin-top: 30px;
}

.addStep{
  height: 300px;
  position: absolute;
}
.bikeList{
  height: 560px;
  /*height: 65vh;*/
  overflow: scroll;
  overflow-x: hidden !important;
}

h1{
  text-align: center;
}

.hoseImage{
  padding-bottom:7px;
  height: 180px;
  width: 225px;
  float: left;
}
.simple{
  font-size: 20px;
  font-family: 华文新魏;
  color: darkorange;
}

.describe{
  text-align: left;
  margin: 10px;
  font-size: 15px;
  font-family: 微软雅黑;
}

.price{
  margin: 0px;
}

.price>span{
  font-size: 30px;
  color: red;
  font-family: 新宋体;
}

.tag{
  height: 20px;
}



.el-tag{
  margin: 5px;
}

.changeBikeInfo{
  margin-top: 10px;
}

.bikeArea{
  width: 60px;
}

.rentMoney{
  width: 90px;
}

.otherCondition{
  color: deepskyblue;
}

.address{
  width: 150px;
}

.changeBike{
  width: 1200px;
  margin: 0 auto;
}

.addBike{
  width: 500px;
  margin: 0 auto;
}

.el-input__inner {
  width: 300px;
}

.addBikeType{

  float: right;
}

.addBtn>*{
  margin: 30px 30px;
}

.addBikeInput{
  width: 300px;
  float: right;
}

.checkBtn>*{
  margin: 30px 30px;
}

#myMap{
  width: 600px;
  height: 300px;
}

.bikePage{
  margin-top: 10px;
}

.funBtn{
  justify-content: space-around;
  display: flex;
}

.bikeState{
  display: flex;
  width: 50%;
}

.options>*{
  margin-left: 30px;
}
</style>
